<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="autocomplete">
        <title>Overview | Kendo UI AutoComplete</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize the Kendo UI AutoComplete widget, provide AutoComplete suggestions and customize AutoComplete templates.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/editors/autocomplete/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/editors/autocomplete/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="autocomplete-overview"><a href="#autocomplete-overview">AutoComplete Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/autocomplete/index">Kendo UI AutoComplete widget</a> provides suggestions depending on the typed text.</p>

<p>It also allows multiple value entries. The suggestions shown by the widget can come from a local array or from a remote data service.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="initialize-the-autocomplete"><a href="#initialize-the-autocomplete">Initialize the AutoComplete</a></h3>

<p>To initialize the AutoComplete widget, use a jQuery selector.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;

$(document).ready(function() {
 $("#autoComplete").kendoAutoComplete(["Item1", "Item2"]);
});
</code></pre>

<blockquote>
<p><strong>Important</strong></p>

<p>The widget copies any styles and CSS classes from the <code>input</code> element to the <code>wrapper</code> element.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" class="myClass" /&gt;

results to:

&lt;span class="k-widget k-autocomplete k-header k-state-default myClass"&gt;
    &lt;input id="autoComplete" class="myClass" /&gt;
&lt;/span&gt;
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-Manage"><a href="#configuration-Manage">Manage Suggestions</a></h3>

<p>To provide AutoComplete suggestions, you can use either of the 2 primary ways:</p>

<ol>
<li> Bind to a local data array.</li>
<li> Bind to a remote data service.</li>
</ol>

<p>Locally defined values are best for small, fixed sets of suggestions. Remote suggestions must be used for larger data sets. When used with the <code>DataSource</code> component, the filtering of large remote data services can be pushed to the server as well, which maximizes the client-side performance.</p>

<h4>Bind to Local Data Arrays</h4>

<p>To configure and provide the AutoComplete suggestions locally, either:</p>

<ul>
<li>Pass an array directly to its constructor, or</li>
<li>Set the <code>dataSource</code> property to a local array.</li>
</ul>

<p>To directly initialize a local data array in <code>constructor</code>, refer to the following example.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;

&lt;script&gt;
    $("#autoComplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);
&lt;/script&gt;
</code></pre>

<p>To bind the widget to a local data array by using the <code>dataSource</code> property, refer to the following example.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;
&lt;script&gt;
    var data = ["Item1", "Item2", "Item3"];
    $("#autoComplete").kendoAutoComplete({
        dataSource: data
    });
&lt;/script&gt;
</code></pre>

<h4>Bind to Remote Data Services</h4>

<p>To initialize the AutoComplete by binding the widget to a remote data service, use the <a href="/framework/datasource/overview">Data Source component</a>. It is an abstraction for local and remote data. Remote data binding is appropriate for larger data sets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as <a href="http://en.wikipedia.org/wiki/XML">XML</a>, <a href="http://en.wikipedia.org/wiki/JSON">JSON</a>, and <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>.</p>

<p>To bind the widget to a remote data service by using oData through the Data Source component, refer to the following example.</p>

<h6>Example</h6>

<pre><code>$(document).ready(function(){
    $("#autoComplete").kendoAutoComplete({
        minLength: 3,
        dataTextField: "ContactName", // JSON property name to use
        dataSource: new kendo.data.DataSource({
            type: "odata", // specifies data protocol
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            }
        })
    });
});
</code></pre>

<p>To bind the widget to a JSONP service by using the Data Source component, refer to the following example.</p>

<h6>Example</h6>

<pre><code>$(document).ready(function(){
 $("#autoComplete").kendoAutoComplete({
  minLength:6,
  dataTextField:"title",
  filter: "contains",
  dataSource: new kendo.data.DataSource({
   transport: {
    read: {
     url: "http://api.geonames.org/wikipediaSearchJSON",
     data: {
      q: function(){
       return $("#autoComplete").data("kendoAutoComplete").value();
      },
      maxRows: 10,
      username: "demo"
     }
    }
   },
   schema: {
    data:"geonames"
   }
  }),
  change: function(){
   this.dataSource.read();
  }
 })
});
</code></pre>

<h3 id="configuration-Change"><a href="#configuration-Change">Change the List Width</a></h3>

<p>To customize the width of a drop-down list and change its dimensions, use the jQuery <code>width()</code> method.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;

&lt;script&gt;
    $("#autoComplete").kendoAutoComplete();
    var autoComplete = $("#autocomplete").data("kendoAutoComplete");
    // set width of the drop-down list
    autoComplete.list.width(400);
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Adjust"><a href="#configuration-Adjust">Adjust the Popup Width</a></h3>

<p>You can let the popup element automatically adjust its width according to the length of the item label it displays. When the <code>autoWidth</code> option is set to <code>true</code>, the popup shows the content on one line and does not wrap it up.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autocomplete" style="width: 100px;" /&gt;
&lt;script&gt;
$("#autocomplete").kendoAutoComplete({
  autoWidth: true,
  dataSource: {
    data: ["Short item", "An item with really, really long text"]
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Access"><a href="#configuration-Access">Access *-list Elements</a></h3>

<p>The drop-down list renders an ID attribute, generated from the ID of the widget and the <code>-list</code> suffix.</p>

<p>The ID can be used to style the element or to access a specific element inside the popup element.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>If the widget has no ID, the drop-down element will have no ID either.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="autocomplete"&gt;
&lt;script&gt;
  $(document).ready(function() {
    $("#autocomplete").kendoAutoComplete({
        dataSource: ["Item1", "Item2"]
    });

    //the DIV popup element that holds header, footer templates and the suggestion options.
    var popupElement = $("#autocomplete-list");

    console.log(popupElement);
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Remove"><a href="#configuration-Remove">Remove Input Values</a></h3>

<p>The AutoComplete enables you to remove the values from the input area of the widget through the <code>clearButton</code> configuration option. By default, the option is enabled and is set to <code>true</code>. As a result, a <strong>x</strong> button appears in the input area on hover. When clicked, it resets the value of the widget and triggers the <code>change</code> event.</p>

<h2 id="templates"><a href="#templates">Templates</a></h2>

<p>The AutoComplete uses <a href="/framework/templates/overview">Kendo UI templates</a> to provide full control over the way an item and a pop-up header is rendered.</p>

<p>For more information on the capabilities and syntax of the templates, refer to the <a href="/framework/templates/overview">documentation</a>.</p>

<h3 id="item-templates"><a href="#item-templates">Item Templates</a></h3>

<p>The item template manages the way the list items of an AutoComplete are rendered.  </p>

<p>The following example demonstrates how to define an item template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;
&lt;!-- Template --&gt;
&lt;script id="scriptTemplate" type="text/x-kendo-template"&gt;
    ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
&lt;/script&gt;

&lt;!-- AutoComplete initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            template: $("#scriptTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="header-templates"><a href="#header-templates">Header Templates</a></h3>

<p>The header template manages the way the pop-up header of an AutoComplete is rendered.</p>

<p>The following example demonstrates how to define a header template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;
&lt;!-- Template --&gt;
&lt;script id="headerTemplate" type="text/x-kendo-template"&gt;
    &lt;strong&gt;Header&lt;/strong&gt;
&lt;/script&gt;

&lt;!-- AutoComplete initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            headerTemplate: $("#headerTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="footer-templates"><a href="#footer-templates">Footer Templates</a></h3>

<p>The footer template manages the way the pop-up footer of an AutoComplete is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.</p>

<p>The following example demonstrates how to define a footer template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;
&lt;!-- Template --&gt;
&lt;script id="footerTemplate" type="text/x-kendo-template"&gt;
    Total &lt;strong&gt;#: instance.dataSource.total() #&lt;/strong&gt; items found
&lt;/script&gt;

&lt;!-- AutoComplete initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            footerTemplate: $("#footerTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="no-data-templates"><a href="#no-data-templates">No-Data Templates</a></h3>

<p>The AutoComplete widget displays <code>noDataTemplate</code> in the popup when the data source is empty.</p>

<p>The following example demonstrates how to define a <code>noDataTemplate</code> template.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>When the <code>noDataTemplate</code> option is defined, the widget always opens the popup element.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="autoComplete" /&gt;
&lt;!-- Template --&gt;
&lt;script id="noDataTemplate" type="text/x-kendo-template"&gt;
    &lt;strong&gt;No Data!&lt;/strong&gt;
&lt;/script&gt;

&lt;!-- AutoComplete initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            noDataTemplate: $("#noDataTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI AutoComplete:</p>

<ul>
<li><a href="/controls/editors/autocomplete/grouping">Grouping Functionality</a></li>
<li><a href="/controls/editors/autocomplete/virtualization">Virtualization</a></li>
<li><a href="/controls/editors/autocomplete/how-to/AngularJS/using-templates-with-angular">How to Use Custom AngularJS Template</a></li>
<li><a href="/controls/editors/autocomplete/how-to/appearance/add-no-records-custom-template">How to Show a No Records Found Message</a></li>
<li><a href="/aspnet-mvc/helpers/autocomplete/overview">Overview of the ASP.NET MVC HtmlHelper Extension for the AutoComplete Widget</a></li>
<li><a href="/jsp/tags/autocomplete/overview">Overview of the AutoComplete JSP Tag</a></li>
<li><a href="/php/widgets/autocomplete/overview">Overview of the AutoComplete PHP Class</a></li>
<li><a href="/api/javascript/ui/autocomplete">AutoComplete JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI ComboBox:</p>

<ul>
<li><a href="/controls/editors/combobox/overview">Overview of the ComboBox Widget</a></li>
<li><a href="/controls/editors/combobox/grouping">Grouping Functionality</a></li>
<li><a href="/controls/editors/combobox/virtualization">Virtualization</a></li>
<li><a href="/controls/editors/combobox/cascading">Cascading ComboBoxes</a></li>
<li><a href="/controls/editors/combobox/serverfiltering">Server Filtering</a></li>
<li><a href="/api/javascript/ui/combobox">ComboBox JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI MultiSelect:</p>

<ul>
<li><a href="/controls/editors/multiselect/overview">Overview of the MultiSelect Widget</a></li>
<li><a href="/api/javascript/ui/multiselect">MultiSelect JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI DropDownList:</p>

<ul>
<li><a href="/controls/editors/dropdownlist/overview">Overview of the DropDownList Widget</a></li>
<li><a href="/controls/editors/dropdownlist/cascading">Cascading DropDownLists</a></li>
<li><a href="/api/javascript/ui/dropdownlist">DropDownList JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

